import React, { Component } from 'react'

export default class Small extends Component {
    constructor(){
        super();
        this.state = {
            info:'hello'
        }
    }
     // 第二个声明周期函数 作用是 根据props 修改state
    static getDerivedStateFromProps(props,state){
        console.log('small-第二个声明周期函数');
        // console.log(props,state);
        return {
            // info: 'hi~'
        }
    }
    shouldComponentUpdate(nextProps,nextState){
        // 组件是否更新-更新的方式: 外部props的更新和内部state的变化
        console.log(this.props);
        console.log('--shouldComponentUpdate--',nextProps,nextState);
        // return的值为真就更新, 为假就不更新 - 是否render
        // 可以添加if...else的判断, 在某些情况更新, 某些情况不更新, 达到性能优化的目的
        return true
    }
    changeState(){
        this.setState({
            info: 'react'
        })
    }
    getSnapshotBeforeUpdate(oldProps,oldState){
        // 在更新前记录数据状态
        console.log('getSnapshotBeforeUpdate',oldProps,oldState);
        return {
            msg: 'react'
        }
    }
    componentDidUpdate(oldProps,oldState,snapshot){
        console.log('componentDidUpdate',oldProps,oldState);
        console.log('snapshot',snapshot);
    }
    // 组件即将销毁
    componentWillUnmount(){
        // 清除定时器 清除监听 清除自己创建的变量等
        console.log('componentWillUnmount');
    }
    render() {
        console.log('render执行');
        return (
            <div>
                <p>我是子组件</p>
                <p>{this.props.msg}</p>
                <p>{this.state.info}</p>
                <p>{this.state.info}</p>
                <button onClick={ () => this.changeState()}>修改state</button>
            </div>
        )
    }
}
